<template>
  <div class="modern-dashboard" ref="dashboardRef">
    <!-- 动态背景 -->
    <div class="background-animation">
      <canvas ref="particleCanvas" class="particle-canvas"></canvas>
      <div class="gradient-overlay"></div>
    </div>

    <!-- 主内容区域 -->
    <div class="dashboard-content">
      <!-- 顶部标题栏 -->
      <div class="header-section" ref="headerRef">
        <div class="header-content">
          <div class="title-group">
            <h1 class="main-title">
              <span class="title-icon">📊</span>
              设备监控大屏
            </h1>
            <p class="subtitle">实时数据监控与分析平台</p>
          </div>
          <div class="time-info">
            <div class="current-time">{{ currentTime }}</div>
            <div class="current-date">{{ currentDate }}</div>
            <div class="refresh-indicator" :class="{ refreshing: isRefreshing }">
              <span class="refresh-icon">🔄</span>
              <span>{{ isRefreshing ? '数据更新中...' : '实时同步' }}</span>
            </div>
          </div>
        </div>
      </div>

      <!-- 数据概览卡片 -->
      <div class="overview-section" ref="overviewRef">
        <div 
          v-for="(stat, index) in overviewStats" 
          :key="stat.title"
          class="stat-card"
          :data-index="index"
          @mouseenter="onCardHover(index)"
          @mouseleave="onCardLeave(index)"
        >
          <div class="card-icon" :class="stat.iconClass">
            <span>{{ stat.icon }}</span>
          </div>
          <div class="card-content">
            <div class="card-value">{{ stat.value }}</div>
            <div class="card-title">{{ stat.title }}</div>
            <div class="card-trend" :class="stat.trendClass">
              <span class="trend-icon">{{ stat.trendIcon }}</span>
              <span class="trend-value">{{ stat.trendValue }}</span>
            </div>
          </div>
          <div class="card-sparkline">
            <canvas :ref="el => sparklineRefs[index] = el" class="sparkline-canvas"></canvas>
          </div>
        </div>
      </div>

      <!-- 图表区域 -->
      <div class="charts-section" ref="chartsRef">
        <!-- 设备分布饼图 -->
        <div class="chart-container" ref="pieChartRef">
          <div class="chart-header">
            <h3 class="chart-title">设备类型分布</h3>
            <div class="chart-actions">
              <button 
                v-for="view in chartViews" 
                :key="view"
                class="chart-action-btn"
                :class="{ active: currentChartView === view }"
                @click="switchChartView(view)"
              >
                {{ view }}
              </button>
            </div>
          </div>
          <div class="chart-wrapper">
            <div ref="pieChart" class="chart" style="height: 300px;"></div>
          </div>
        </div>

        <!-- 实时数据监控 -->
        <div class="chart-container full-width" ref="realtimeChartRef">
          <div class="chart-header">
            <h3 class="chart-title">实时数据监控</h3>
            <div class="metric-selector">
              <select v-model="selectedMetric" @change="updateRealtimeChart">
                <option value="temperature">温度</option>
                <option value="humidity">湿度</option>
                <option value="pressure">压力</option>
              </select>
            </div>
          </div>
          <div class="chart-wrapper">
            <div ref="realtimeChart" class="chart" style="height: 350px;"></div>
          </div>
        </div>

        <!-- 设备状态趋势 -->
        <div class="chart-container" ref="trendChartRef">
          <div class="chart-header">
            <h3 class="chart-title">设备状态趋势</h3>
            <div class="time-range">
              <span>最近24小时</span>
            </div>
          </div>
          <div class="chart-wrapper">
            <div ref="trendChart" class="chart" style="height: 300px;"></div>
          </div>
        </div>
      </div>

      <!-- 设备列表 -->
      <div class="devices-section" ref="devicesRef">
        <div class="devices-header">
          <h3 class="devices-title">设备列表</h3>
          <div class="devices-actions">
            <button class="action-btn" @click="refreshData">
              <span class="btn-icon">🔄</span>
              刷新
            </button>
            <button class="action-btn" @click="exportData">
              <span class="btn-icon">📥</span>
              导出
            </button>
          </div>
        </div>
        <div class="devices-grid">
          <div 
            v-for="device in recentDevices" 
            :key="device.id"
            class="device-card"
            :class="`status-${device.status}`"
          >
            <div class="device-header">
              <div class="device-info">
                <h4 class="device-name">{{ device.name }}</h4>
                <span class="device-type">{{ device.type }}</span>
              </div>
              <div class="device-status" :class="`status-${device.status}`">
                {{ getStatusText(device.status) }}
              </div>
            </div>
            <div class="device-details">
              <div class="detail-item">
                <span class="detail-label">位置:</span>
                <span class="detail-value">{{ device.location }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">最后更新:</span>
                <span class="detail-value">{{ device.lastUpdate }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">信号强度:</span>
                <div class="signal-indicator">
                  <div 
                    v-for="i in 5" 
                    :key="i"
                    class="signal-bar"
                    :class="{ active: i <= device.signalStrength }"
                  ></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import * as echarts from 'echarts'

export default {
  name: 'ModernDashboard',
  setup() {
    // Refs
    const dashboardRef = ref(null)
    const headerRef = ref(null)
    const overviewRef = ref(null)
    const chartsRef = ref(null)
    const devicesRef = ref(null)
    const particleCanvas = ref(null)
    const pieChartRef = ref(null)
    const trendChartRef = ref(null)
    const realtimeChartRef = ref(null)
    const sparklineRefs = ref([])

    // 图表实例
    const pieChart = ref(null)
    const trendChart = ref(null)
    const realtimeChart = ref(null)

    // 响应式数据
    const currentTime = ref('')
    const currentDate = ref('')
    const isRefreshing = ref(false)
    const currentChartView = ref('pie')
    const selectedMetric = ref('temperature')

    // 数据状态
    const overviewStats = ref([
      {
        title: '总设备数',
        value: '156',
        icon: '📱',
        iconClass: 'device-icon',
        trendIcon: '📈',
        trendValue: '+12',
        trendClass: 'trend-up'
      },
      {
        title: '在线设备',
        value: '142',
        icon: '🟢',
        iconClass: 'online-icon',
        trendIcon: '📈',
        trendValue: '+8',
        trendClass: 'trend-up'
      },
      {
        title: '离线设备',
        value: '8',
        icon: '⚫',
        iconClass: 'offline-icon',
        trendIcon: '📉',
        trendValue: '-2',
        trendClass: 'trend-down'
      },
      {
        title: '告警设备',
        value: '6',
        icon: '⚠️',
        iconClass: 'alert-icon',
        trendIcon: '📊',
        trendValue: '+1',
        trendClass: 'trend-neutral'
      }
    ])

    const recentDevices = ref([
      {
        id: 1,
        name: '温度传感器-001',
        type: '温度传感器',
        status: 'online',
        location: 'A区-1楼',
        lastUpdate: '2分钟前',
        signalStrength: 4
      },
      {
        id: 2,
        name: '湿度监测器-002',
        type: '湿度传感器',
        status: 'online',
        location: 'B区-2楼',
        lastUpdate: '5分钟前',
        signalStrength: 3
      },
      {
        id: 3,
        name: '压力传感器-003',
        type: '压力传感器',
        status: 'alert',
        location: 'C区-3楼',
        lastUpdate: '10分钟前',
        signalStrength: 2
      },
      {
        id: 4,
        name: '流量计-004',
        type: '流量计',
        status: 'offline',
        location: 'D区-1楼',
        lastUpdate: '1小时前',
        signalStrength: 1
      }
    ])

    const chartViews = ['pie', 'bar', 'line']

    // 动画时间轴
    let animationTimeline
    let particleAnimation
    let threeScene

    // 方法
    const updateTime = () => {
      const now = new Date()
      currentTime.value = now.toLocaleTimeString('zh-CN', { 
        hour12: false,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit'
      })
      currentDate.value = now.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long'
      })
    }

    const initParticleAnimation = () => {
      if (!particleCanvas.value) return

      const canvas = particleCanvas.value
      const ctx = canvas.getContext('2d')
      
      // 设置canvas大小
      canvas.width = window.innerWidth
      canvas.height = window.innerHeight

      const particles = []
      const particleCount = 100

      // 创建粒子
      for (let i = 0; i < particleCount; i++) {
        particles.push({
          x: Math.random() * canvas.width,
          y: Math.random() * canvas.height,
          size: Math.random() * 3 + 1,
          speedX: Math.random() * 2 - 1,
          speedY: Math.random() * 2 - 1,
          opacity: Math.random() * 0.5 + 0.2
        })
      }

      const animateParticles = () => {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        
        // 绘制粒子
        particles.forEach(particle => {
          ctx.beginPath()
          ctx.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2)
          ctx.fillStyle = `rgba(255, 255, 255, ${particle.opacity})`
          ctx.fill()
          
          // 更新位置
          particle.x += particle.speedX
          particle.y += particle.speedY
          
          // 边界检查
          if (particle.x < 0 || particle.x > canvas.width) particle.speedX *= -1
          if (particle.y < 0 || particle.y > canvas.height) particle.speedY *= -1
        })
        
        requestAnimationFrame(animateParticles)
      }
      
      animateParticles()
    }

    const initCharts = () => {
      // 初始化饼图
      if (pieChart.value) {
        const chart = echarts.init(pieChart.value)
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            right: 10,
            top: 'center',
            textStyle: {
              color: '#fff'
            }
          },
          series: [
            {
              name: '设备类型',
              type: 'pie',
              radius: ['40%', '70%'],
              avoidLabelOverlap: false,
              itemStyle: {
                borderRadius: 10,
                borderColor: '#0f172a',
                borderWidth: 2
              },
              label: {
                show: false
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: 18,
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 40, name: '温度传感器', itemStyle: { color: '#3b82f6' } },
                { value: 35, name: '湿度传感器', itemStyle: { color: '#10b981' } },
                { value: 25, name: '压力传感器', itemStyle: { color: '#f59e0b' } }
              ]
            }
          ]
        }
        chart.setOption(option)
        pieChart.value = chart
      }

      // 初始化趋势图
      if (trendChart.value) {
        const chart = echarts.init(trendChart.value)
        const option = {
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            data: ['在线设备', '离线设备', '告警设备'],
            textStyle: {
              color: '#fff'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00', '24:00'],
            axisLine: {
              lineStyle: {
                color: '#94a3b8'
              }
            }
          },
          yAxis: {
            type: 'value',
            axisLine: {
              lineStyle: {
                color: '#94a3b8'
              }
            }
          },
          series: [
            {
              name: '在线设备',
              type: 'line',
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 3
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(16, 185, 129, 0.6)' },
                  { offset: 1, color: 'rgba(16, 185, 129, 0.1)' }
                ])
              },
              data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
              name: '离线设备',
              type: 'line',
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 3
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(100, 116, 139, 0.6)' },
                  { offset: 1, color: 'rgba(100, 116, 139, 0.1)' }
                ])
              },
              data: [20, 82, 91, 34, 90, 30, 10]
            },
            {
              name: '告警设备',
              type: 'line',
              stack: 'Total',
              smooth: true,
              lineStyle: {
                width: 3
              },
              showSymbol: false,
              areaStyle: {
                opacity: 0.8,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: 'rgba(245, 158, 11, 0.6)' },
                  { offset: 1, color: 'rgba(245, 158, 11, 0.1)' }
                ])
              },
              data: [10, 12, 21, 14, 20, 30, 40]
            }
          ]
        }
        chart.setOption(option)
        trendChart.value = chart
      }

      // 初始化实时图表
      if (realtimeChart.value) {
        updateRealtimeChart()
      }
    }

    const updateRealtimeChart = () => {
      if (!realtimeChart.value) return
      
      const chart = echarts.init(realtimeChart.value)
      const now = new Date()
      const data = []
      
      // 生成实时数据
      for (let i = 0; i < 50; i++) {
        const time = new Date(now.getTime() - (50 - i) * 2000)
        let value
        
        switch (selectedMetric.value) {
          case 'temperature':
            value = 20 + Math.sin(i * 0.2) * 5 + Math.random() * 2
            break
          case 'humidity':
            value = 50 + Math.cos(i * 0.3) * 10 + Math.random() * 3
            break
          case 'pressure':
            value = 1000 + Math.sin(i * 0.1) * 50 + Math.random() * 10
            break
        }
        
        data.push([time, value])
      }

      const option = {
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            const date = new Date(params[0].value[0])
            return `${date.toLocaleTimeString()}<br/>${params[0].value[1].toFixed(2)}`
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'time',
          boundaryGap: false,
          axisLine: {
            lineStyle: {
              color: '#94a3b8'
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: '#94a3b8'
            }
          }
        },
        series: [
          {
            name: selectedMetric.value,
            type: 'line',
            showSymbol: false,
            smooth: true,
            lineStyle: {
              width: 3
            },
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: 'rgba(59, 130, 246, 0.6)' },
                { offset: 1, color: 'rgba(59, 130, 246, 0.1)' }
              ])
            },
            data: data
          }
        ]
      }
      
      chart.setOption(option)
      realtimeChart.value = chart
    }

    const switchChartView = (view) => {
      currentChartView.value = view
      // 这里可以添加切换图表视图的逻辑
    }

    const refreshData = () => {
      isRefreshing.value = true
      
      // 模拟数据刷新
      setTimeout(() => {
        isRefreshing.value = false
        // 更新图表数据
        initCharts()
      }, 2000)
    }

    const exportData = () => {
      // 导出数据逻辑
      console.log('导出数据')
    }

    const getStatusText = (status) => {
      const statusMap = {
        online: '在线',
        offline: '离线',
        alert: '告警'
      }
      return statusMap[status] || '未知'
    }

    const onCardHover = (index) => {
      const card = document.querySelector(`.stat-card[data-index="${index}"]`);
      if (card) {
        // 使用CSS transition代替动画库
        card.style.transition = 'all 0.3s ease';
        card.style.transform = 'scale(1.05) translateY(-10px)';
      }
    }

    const onCardLeave = (index) => {
      const card = document.querySelector(`.stat-card[data-index="${index}"]`);
      if (card) {
        // 使用CSS transition代替动画库
        card.style.transition = 'all 0.3s ease';
        card.style.transform = 'scale(1) translateY(0)';
      }
    }

    // 初始化动画 - 暂时禁用动画以解决显示问题
    const initAnimations = () => {
      // 确保所有元素保持可见，不使用动画
      if (headerRef.value) {
        headerRef.value.style.opacity = '1';
        headerRef.value.style.transform = 'translateY(0)';
      }
      document.querySelectorAll('.stat-card').forEach(el => {
        el.style.opacity = '1';
        el.style.transform = 'translateY(0)';
      });
      document.querySelectorAll('.chart-container').forEach(el => {
        el.style.opacity = '1';
        el.style.transform = 'translateX(0)';
      });
      document.querySelectorAll('.device-card').forEach(el => {
        el.style.opacity = '1';
        el.style.transform = 'translateY(0)';
      });
    }

    // 生命周期
    onMounted(() => {
      updateTime()
      
      // 设置时间更新定时器
      const timeInterval = setInterval(updateTime, 1000)
      
      // 先确保所有元素可见
      setTimeout(() => {
        if (headerRef.value) {
          headerRef.value.style.opacity = '1';
          headerRef.value.style.transform = 'translateY(0)';
        }
        document.querySelectorAll('.stat-card').forEach(el => {
          el.style.opacity = '1';
          el.style.transform = 'translateY(0)';
        });
        document.querySelectorAll('.chart-container').forEach(el => {
          el.style.opacity = '1';
          el.style.transform = 'translateX(0)';
        });
        document.querySelectorAll('.device-card').forEach(el => {
          el.style.opacity = '1';
          el.style.transform = 'translateY(0)';
        });
      }, 10)
      
      // 初始化图表（不使用动画）
      nextTick(() => {
        initCharts()
        // 延迟初始化粒子动画，确保内容先加载完成
        setTimeout(() => {
          initParticleAnimation()
        }, 500)
      })

      // 窗口大小变化时重新初始化
      const handleResize = () => {
        if (particleCanvas.value) {
          particleCanvas.value.width = window.innerWidth
          particleCanvas.value.height = window.innerHeight
        }
        
        // 重新渲染图表
        if (pieChart.value) pieChart.value.resize()
        if (trendChart.value) trendChart.value.resize()
        if (realtimeChart.value) realtimeChart.value.resize()
      }

      window.addEventListener('resize', handleResize)

      // 清理函数
      onUnmounted(() => {
        clearInterval(timeInterval)
        window.removeEventListener('resize', handleResize)
        
        if (pieChart.value) pieChart.value.dispose()
        if (trendChart.value) trendChart.value.dispose()
        if (realtimeChart.value) realtimeChart.value.dispose()
      })
    })

    return {
      // Refs
      dashboardRef,
      headerRef,
      overviewRef,
      chartsRef,
      devicesRef,
      particleCanvas,
      pieChartRef,
      trendChartRef,
      realtimeChartRef,
      sparklineRefs,
      
      // 图表实例
      pieChart,
      trendChart,
      realtimeChart,
      
      // 响应式数据
      currentTime,
      currentDate,
      isRefreshing,
      currentChartView,
      selectedMetric,
      overviewStats,
      recentDevices,
      chartViews,
      
      // 方法
      switchChartView,
      refreshData,
      exportData,
      getStatusText,
      onCardHover,
      onCardLeave,
      updateRealtimeChart
    }
  }
}
</script>

<style scoped>
/* 全局样式 */
.modern-dashboard {
  background: linear-gradient(135deg, #070b16 0%, #111827 100%);
  color: #ffffff;
  min-height: 100vh;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  position: relative;
  overflow: hidden;
}

/* 背景效果增强 */
.modern-dashboard::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 80%, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);
  background-attachment: fixed;
  z-index: 0;
}

/* 网格背景纹理 */
.modern-dashboard::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
  z-index: 0;
  pointer-events: none;
}

/* 动态背景 */
.background-animation {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.particle-canvas {
  width: 100%;
  height: 100%;
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 20% 80%, rgba(96, 165, 250, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
              radial-gradient(circle at 40% 40%, rgba(245, 158, 11, 0.1) 0%, transparent 50%);
  background-attachment: fixed;
}

/* 主内容区域 */
.dashboard-content {
  position: relative;
  z-index: 10;
  min-height: calc(100vh - 48px);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 28px;
  overflow-y: visible;
  box-sizing: border-box;
  max-width: 1800px;
  margin: 0 auto;
}

/* 头部样式 */
.header-section {
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.08) 0%, rgba(16, 185, 129, 0.04) 100%);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(96, 165, 250, 0.1);
  position: relative;
  overflow: hidden;
}

.header-section::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(96, 165, 250, 0.15) 0%, transparent 70%);
  animation: float 8s ease-in-out infinite;
}

.header-content {
  position: relative;
  z-index: 1;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.main-title {
  font-size: 42px;
  font-weight: 800;
  color: #ffffff;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  letter-spacing: -0.5px;
  text-shadow: 0 0 20px rgba(96, 165, 250, 0.3);
}

.title-icon {
  font-size: 40px;
  animation: bounce 2s ease-in-out infinite;
}

.subtitle {
  font-size: 16px;
  color: #94a3b8;
  margin: 0;
  font-weight: 400;
}

.time-info {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.current-time {
  font-size: 32px;
  font-weight: 600;
  color: #60a5fa;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  text-shadow: 0 0 10px rgba(96, 165, 250, 0.3);
}

.current-date {
  font-size: 14px;
  color: #94a3b8;
}

.refresh-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  font-size: 14px;
  color: #94a3b8;
  transition: all 0.3s ease;
}

.refresh-indicator.refreshing {
  color: #60a5fa;
  background: rgba(96, 165, 250, 0.1);
}

.refresh-indicator.refreshing .refresh-icon {
  animation: spin 1s linear infinite;
}

/* 数据概览卡片 */
.overview-section {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.stat-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.01) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--card-gradient-start, #3b82f6), var(--card-gradient-end, #6366f1));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(96, 165, 250, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
}

.stat-card:hover::before {
  opacity: 1;
}

.card-icon {
  width: 70px;
  height: 70px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.stat-card:hover .card-icon {
  transform: scale(1.15);
  box-shadow: 0 0 25px rgba(96, 165, 250, 0.3);
}

.card-icon::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.card-icon:hover::before {
  opacity: 1;
}

.device-icon {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  --card-gradient-start: #3b82f6;
  --card-gradient-end: #6366f1;
}

.online-icon {
  background: linear-gradient(135deg, #10b981, #059669);
  --card-gradient-start: #10b981;
  --card-gradient-end: #059669;
}

.offline-icon {
  background: linear-gradient(135deg, #64748b, #475569);
  --card-gradient-start: #64748b;
  --card-gradient-end: #475569;
}

.alert-icon {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  --card-gradient-start: #f59e0b;
  --card-gradient-end: #d97706;
}

.card-content {
  flex: 1;
}

.card-value {
  font-size: 42px;
  font-weight: 800;
  color: #ffffff;
  margin-bottom: 8px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  text-shadow: 0 0 15px rgba(96, 165, 250, 0.2);
  line-height: 1;
}

.card-title {
  font-size: 14px;
  color: #94a3b8;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  margin-bottom: 8px;
}

.card-trend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
}

.trend-up {
  color: #10b981;
}

.trend-down {
  color: #ef4444;
}

.trend-neutral {
  color: #94a3b8;
}

.card-sparkline {
  width: 60px;
  height: 30px;
}

.sparkline-canvas {
  width: 100%;
  height: 100%;
}

/* 图表区域 */
.charts-section {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  flex: 1;
}

.chart-container {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.9) 100%);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding: 28px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(96, 165, 250, 0.1);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.chart-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3b82f6, #10b981, #f59e0b);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.chart-container:hover::before {
  opacity: 1;
}

.chart-container:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(96, 165, 250, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
}

.full-width {
  grid-column: 1 / -1;
}

.chart-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.chart-title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
}

.chart-actions {
  display: flex;
  gap: 8px;
}

.chart-action-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: #e2e8f0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(8px);
}

.chart-action-btn:hover {
  background: rgba(96, 165, 250, 0.15);
  color: #ffffff;
  border-color: rgba(96, 165, 250, 0.2);
  transform: translateY(-2px);
}

.chart-action-btn.active {
  background: linear-gradient(135deg, #3b82f6, #6366f1);
  border-color: #3b82f6;
  color: #ffffff;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
}

.metric-selector select {
  padding: 10px 20px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  color: #ffffff;
  font-size: 14px;
  outline: none;
  backdrop-filter: blur(8px);
  cursor: pointer;
  transition: all 0.3s ease;
}

.metric-selector select:hover {
  border-color: rgba(96, 165, 250, 0.2);
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(96, 165, 250, 0.05) 100%);
}

.metric-selector select:focus {
  border-color: rgba(96, 165, 250, 0.3);
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
}

.metric-selector select option {
  background: #1e293b;
  color: #ffffff;
}

.time-range {
  color: #94a3b8;
  font-size: 14px;
}

.chart-wrapper {
  position: relative;
  flex: 1;
}

.chart {
  width: 100%;
  height: 100%;
  border-radius: 12px;
}

/* 设备列表区域 */
.devices-section {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.8) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.devices-section:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.devices-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.devices-title {
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.5px;
}

.devices-actions {
  display: flex;
  gap: 12px;
}

.action-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  background: linear-gradient(135deg, rgba(96, 165, 250, 0.1) 0%, rgba(16, 185, 129, 0.05) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  color: #e2e8f0;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  z-index: 1;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
  z-index: -1;
}

.action-btn:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.action-btn:hover::before {
  width: 200px;
  height: 200px;
}

.action-btn:active {
  transform: scale(0.98);
}

.action-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #ffffff;
  transform: translateY(-2px);
}

.btn-icon {
  font-size: 16px;
}

.devices-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 28px;
}

.device-card {
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 28px;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(96, 165, 250, 0.05);
}

.device-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.device-card.status-online::before {
  background: linear-gradient(to bottom, #10b981, #34d399);
}

.device-card.status-offline::before {
  background: linear-gradient(to bottom, #64748b, #94a3b8);
}

.device-card.status-warning::before {
  background: linear-gradient(to bottom, #f59e0b, #fbbf24);
}

.device-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
  transition: opacity 0.4s ease;
  opacity: 0;
}

.device-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(96, 165, 250, 0.2);
  border-color: rgba(255, 255, 255, 0.15);
}

.device-card:hover::before,
.device-card:hover::after {
  opacity: 1;
}

.device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.device-info {
  flex: 1;
}

.device-name {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 6px 0;
  text-shadow: 0 0 15px rgba(96, 165, 250, 0.2);
  letter-spacing: -0.5px;
}

.device-type {
  font-size: 14px;
  color: #94a3b8;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 8px;
  display: inline-block;
}

.device-status {
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  backdrop-filter: blur(8px);
}

.device-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: pulse-status 2s ease-in-out infinite;
}

.status-online {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.2);
}

.status-online::before {
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
}

.status-offline {
  background: rgba(100, 116, 139, 0.1);
  color: #94a3b8;
  border: 1px solid rgba(100, 116, 139, 0.2);
}

.status-offline::before {
  background: #64748b;
  box-shadow: 0 0 10px #64748b;
}

.status-alert {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.2);
}

.status-warning::before {
  background: #f59e0b;
  box-shadow: 0 0 10px #f59e0b;
}



.device-details {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  position: relative;
}

.detail-label {
  color: #94a3b8;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-label::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #60a5fa;
  opacity: 0.7;
}

.detail-value {
  color: #ffffff;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
}

.signal-indicator {
  display: flex;
  gap: 4px;
  align-items: flex-end;
}

.signal-bar {
  width: 5px;
  height: 24px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 3px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.signal-bar::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #3b82f6;
  transition: height 1s ease;
}

.device-card:hover .signal-bar::after {
  animation: signal-wave 1.5s ease-in-out infinite;
}

.signal-bar:nth-child(1)::after {
  height: 100%;
}

.signal-bar:nth-child(2)::after {
  height: 80%;
}

.signal-bar:nth-child(3)::after {
  height: 60%;
}

.signal-bar:nth-child(4)::after {
  height: 40%;
}

.signal-bar:nth-child(5)::after {
  height: 20%;
}

.signal-bar.active {
  background: #3b82f6;
  box-shadow: 0 0 12px rgba(59, 130, 246, 0.5);
  border: 1px solid rgba(59, 130, 246, 0.3);
}

/* 动画定义 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-12px) rotate(5deg);
  }
}

@keyframes pulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes pulse-status {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 10px var(--status-color, #10b981), 0 0 20px var(--status-color, #10b981), 0 0 30px var(--status-color, #10b981);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.2);
    box-shadow: 0 0 15px var(--status-color, #10b981), 0 0 30px var(--status-color, #10b981), 0 0 45px var(--status-color, #10b981);
  }
}

.status-online::before {
  --status-color: #10b981;
}

.status-offline::before {
  --status-color: #64748b;
}

.status-warning::before {
  --status-color: #f59e0b;
}

@keyframes signal-wave {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.8;
  }
  50% {
    transform: translateY(-40%);
    opacity: 1;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.5);
  }
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .overview-section {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .charts-section {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .chart-container:nth-child(3) {
    grid-column: 1 / -1;
  }
  
  .devices-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1024px) {
  .dashboard-content {
    padding: 20px;
    gap: 20px;
  }
  
  .overview-section {
    grid-template-columns: 1fr;
  }
  
  .charts-section {
    grid-template-columns: 1fr;
  }
  
  .header-content {
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
  }
  
  .time-info {
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  .dashboard-content {
    padding: 16px;
    gap: 16px;
  }
  
  .main-title {
    font-size: 32px;
  }
  
  .current-time {
    font-size: 24px;
  }
  
  .stat-card {
    padding: 20px;
  }
  
  .card-value {
    font-size: 32px;
  }
  
  .chart-container {
    padding: 20px;
  }
  
  .devices-section {
    padding: 20px;
  }
  
  .devices-header {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  
  .devices-actions {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 480px) {
  .dashboard-content {
    padding: 12px;
  }
  
  .main-title {
    font-size: 28px;
  }
  
  .current-time {
    font-size: 20px;
  }
  
  .stat-card {
    padding: 16px;
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .card-value {
    font-size: 28px;
  }
  
  .chart-container {
    padding: 16px;
  }
  
  .devices-section {
    padding: 16px;
  }
  
  .device-card {
    padding: 16px;
  }
  
  .devices-grid {
    grid-template-columns: 1fr;
  }
}
</style>